<template>
  <div class="coplist">
    <section class="point-box sys-item1">
      <div class="cop-value">{{ val }}</div>
      <div class="cop-name">风水系统COP</div>
      <div class="cop-status">{{ val | copStatus }}</div>

      <div
        class="line"
        :style="{
          transform: 'translate(-50%, 0) rotate(' + (val - 5) * 25.5 + 'deg)',
        }"
      ></div>
    </section>
    <section class="point-box sys-item2">
      <div class="cop-value">{{ val2 }}</div>
      <div class="cop-name">水系统COP</div>
      <div class="cop-status">{{ val2 | copStatus }}</div>
      <div
        class="line"
        :style="{
          transform: 'translate(-50%, 0) rotate(' + (val2 - 5) * 25.5 + 'deg)',
        }"
      ></div>
    </section>
    <section class="point-box sys-item3">
      <el-carousel indicator-position="none" arrow="never">
        <el-carousel-item v-for="(item, index) in val3" :key="index">
          <div class="cop-value v-v" ref="v">{{ item.value || "-" }}</div>
          <div class="cop-name">{{ item.name || "-" }}</div>
          <div class="cop-status">
            {{ item.value | copStatus }}
          </div>
          <div
            class="line-dy"
            v-if="item.value > 10"
            :style="{
              transform:
                'translate(-50%, 0) rotate(' + (10 - 5) * 25.5 + 'deg)',
            }"
          ></div>
          <div
            class="line-dy"
            v-if="item.value < 10"
            :style="{
              transform:
                'translate(-50%, 0) rotate(' + (item.value - 5) * 25.5 + 'deg)',
            }"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <div class="run-item position1">
      <div class="run-value">
        <span class="va1">{{
          (copCount && copCount[0] && copCount[0].run) || "-"
        }}</span>
        <span class="va2">/</span>
        <span class="va3">{{
          (copCount && copCount[0] && copCount[0].total) || "-"
        }}</span>
      </div>
      <div class="split-line"></div>
      <div class="text1">
        {{ copCount && copCount[0] && copCount[0].name }}
      </div>
    </div>

    <div class="run-item position2">
      <el-carousel indicator-position="none" arrow="never">
        <el-carousel-item v-for="(item, index) in copCount[1]" :key="index">
          <div class="run-value">
            <span class="va1">{{ item.run }}</span>
            <span class="va2">/</span>
            <span class="va3">{{ item.total }}</span>
          </div>
          <div class="split-line"></div>
          <div class="text1">{{ item.name }}</div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="run-item position3">
      <div class="run-value">
        <span class="va1">{{
          copCount && copCount[2] && copCount[2].run
        }}</span>
        <span class="va2">/</span>
        <span class="va3">{{
          copCount && copCount[2] && copCount[2].total
        }}</span>
      </div>
      <div class="split-line"></div>
      <div class="text1">
        {{ copCount && copCount[2] && copCount[2].name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Coplist",
  filters: {
    copStatus(value) {
      return value > 5
        ? "优异"
        : value > 4.1 && value < 5
        ? "良好"
        : value > 3.5 && value < 4.1
        ? "一般"
        : value < 3.5
        ? "改造"
        : "-";
    },
  },
  components: {},
  props: ["val", "val2", "val3", "copCount"],
  created() {},
  data() {
    return {};
  },
  methods: {},
  computed: {},
};
</script>
<style lang="less" scoped>
.coplist {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  //   background-color: rgba(255, 255, 255, 0.5);
  .point-box {
    width: 130px;
    height: 128px;
    // background-color: rgba(226, 236, 85, 0.4);
    position: absolute;
    text-align: center;
  }
  .sys-item1 {
    padding-top: 36px;
    top: 110px;
    left: 96px;

    .cop-value {
      font-size: 22px;
      font-weight: bold;
      color: #fff;
    }

    .cop-name {
      font-size: 12px;
      color: #fff;
      margin: 1% 0;
    }

    .cop-status {
      font-size: 12px;
      color: #1eb8de;
    }

    .line {
      width: 9px;
      height: 126px;
      //   background-color: #e8432d;
      position: absolute;
      top: 17px;
      left: 50%;
      transform-origin: center;

      &::after {
        position: absolute;
        content: "";
        width: 9px;
        height: 21px;
        background: url("../../../assets/img/pointer.png") no-repeat center;
        background-size: cover;
        top: 0;
        left: 0;
      }
    }
  }

  .sys-item2 {
    padding-top: 42px;
    top: 288px;
    left: 76px;

    .cop-value {
      font-size: 22px;
      font-weight: bold;
      color: #fff;
    }

    .cop-name {
      font-size: 12px;
      color: #fff;
      margin: 1% 0;
    }

    .cop-status {
      font-size: 12px;
      color: #1eb8de;
    }

    .line {
      width: 9px;
      height: 120px;
      // background-color: #f1de11;
      position: absolute;
      top: 20px;
      left: 50%;
      transform-origin: center;

      &::after {
        position: absolute;
        content: "";
        width: 9px;
        height: 21px;
        background: url("../../../assets/img/pointer.png") no-repeat center;
        background-size: cover;
        top: 0;
        left: 0;
      }
    }
  }

  .sys-item3 {
    padding-top: 15px;
    bottom: 50px;
    left: 228px;

    /deep/ .el-carousel__arrow {
      display: none;
    }

    /deep/ .el-carousel {
      width: 100%;
      height: 100%;
    }

    .cop-value {
      margin-top: 20%;
      font-size: 22px;
      font-weight: bold;
      color: #fff;
    }

    .cop-name {
      font-size: 12px;
      color: #fff;
      margin: 1% 0;
    }

    .cop-status {
      font-size: 12px;
      color: #1eb8de;
    }

    .line-dy {
      width: 9px;
      height: 126px;
      // background-color: #2de31d;
      z-index: 123;
      position: absolute;
      top: 1px;
      left: 50%;
      transform-origin: center;

      &::after {
        position: absolute;
        content: "";
        width: 9px;
        height: 21px;
        background: url("../../../assets/img/pointer.png") no-repeat center;
        background-size: cover;
        top: 0;
        left: 0;
      }
    }
  }

  .run-item {
    width: 80px;
    height: 80px;
    // background-color: rgba(250, 255, 5, 0.2);
    position: absolute;
    text-align: center;
    padding-top: 6px;

    .run-value {
      font-size: 24px;

      .va1 {
        color: #87eaf1;
      }

      .va2 {
        color: #ffffff;
      }

      .va3 {
        color: #ffffff;
      }
    }

    .split-line {
      width: 60%;
      margin: 4px auto;
      border-bottom: 2px dashed #87eaf1;
    }

    .text1 {
      color: #87eaf1;
      font-size: 12px;
    }
  }
  .position1 {
    top: 140px;
    right: 115px;
  }
  .position2 {
    top: 318px;
    right: 96px;
  }
  .position3 {
    bottom: 70px;
    right: 250px;
  }
}
</style>
